<template>
	<view class="container">
		<!-- 导航栏 -->
		<view class="nav-bar">
			<view class="nav-left" @click="goBack">
				<text class="back-icon">‹</text>
			</view>
			<view class="nav-title">会员中心</view>
			<view class="nav-right">
				<text class="more-icon">⋯</text>
			</view>
		</view>

		<!-- 会员信息卡片 -->
		<view class="member-card">
			<view class="member-header">
				<view class="user-info">
					<image class="avatar" :src="memberInfo.avatar" mode="aspectFill"></image>
					<view class="user-details">
						<view class="username-row">
							<text class="username">{{ memberInfo.nickname }}</text>
							<text class="level-icon">👑</text>
							<text class="vip-icon">💎</text>
							<text class="heart-icon">💝</text>
						</view>
						<view class="member-status">
							<text class="join-btn" @click="joinMember">加入会员</text>
						</view>
						<view class="member-id">ID: {{ memberInfo.memberId }}</view>
					</view>
				</view>
				<view class="member-detail" @click="viewMemberDetail">
					<text class="detail-text">会员明细</text>
					<text class="arrow">></text>
				</view>
			</view>

			<!-- 会员统计 -->
			<view class="member-stats">
				<view class="stat-item">
					<view class="stat-number">{{ memberInfo.balance }}</view>
					<view class="stat-label">会员</view>
				</view>
				<view class="stat-item">
					<view class="stat-number">{{ memberInfo.points }}</view>
					<view class="stat-label">我的积分</view>
				</view>
				<view class="stat-item">
					<view class="stat-number">{{ memberInfo.credits }}</view>
					<view class="stat-label">积分</view>
				</view>
				<view class="stat-item">
					<view class="stat-number">{{ memberInfo.coupons }}</view>
					<view class="stat-label">卡券</view>
				</view>
			</view>

			<!-- 加入会员享受4大权益 -->
			<view class="member-benefits">
				<button class="join-member-btn" @click="joinMemberWithBenefits">
					加入会员享受4大权益
				</button>
			</view>
		</view>

		<!-- 会员权益图标 -->
		<view class="benefits-icons">
			<view class="benefit-item" @click="navigateTo('account-protection')">
				<view class="benefit-icon">🛡️</view>
				<text class="benefit-label">账户保障</text>
			</view>
			<view class="benefit-item" @click="navigateTo('exclusive-gifts')">
				<view class="benefit-icon">🎁</view>
				<text class="benefit-label">独享礼券</text>
			</view>
			<view class="benefit-item" @click="navigateTo('order-rewards')">
				<view class="benefit-icon">🏆</view>
				<text class="benefit-label">下单奖励</text>
			</view>
			<view class="benefit-item" @click="navigateTo('invite-rewards')">
				<view class="benefit-icon">💰</view>
				<text class="benefit-label">邀请奖励</text>
			</view>
		</view>

		<!-- 专属大礼包 -->
		<view class="gift-package">
			<view class="package-content">
				<view class="package-text">
					<view class="package-title">领取专属大礼包</view>
					<view class="package-subtitle">点亮小图标 开启赚钱秘籍</view>
					<view class="package-action" @click="claimGiftPackage">
						<text>点击即可享受>></text>
					</view>
				</view>
				<view class="package-image">🎁</view>
			</view>
		</view>

		<!-- 每日完成赚钱任务 -->
		<view class="daily-tasks">
			<view class="task-header">
				<text class="task-title">每日完成赚钱任务</text>
				<view class="task-action" @click="completeAllTasks">
					<text class="complete-text">去完成</text>
				</view>
			</view>
			<view class="task-subtitle">这1分钟的操作还有现金奖励</view>
		</view>

		<!-- 会员规则 -->
		<view class="member-rules">
			<view class="rules-title">会员规则：</view>
			<view class="rule-item">
				<text class="rule-number">1、</text>
				<text class="rule-text">会员开通后有效期为永久；</text>
			</view>
			<view class="rule-item">
				<text class="rule-number">2、</text>
				<text class="rule-text">会员享受邀请人、被邀请人以及以下三级完成订单返利；</text>
			</view>
			<view class="rule-item">
				<text class="rule-number">3、</text>
				<text class="rule-text">充值金额享受支付折扣全额账，并根据充值金额不同赠送不同额度优惠券</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				memberInfo: {
					nickname: '微信用户',
					avatar: '/static/logo.png',
					memberId: '88889329854343363',
					balance: 0,
					points: 0,
					credits: 0,
					coupons: 0,
					isMember: false,
					memberLevel: 0
				}
			}
		},
		onLoad() {
			console.log('会员中心页面加载');
		},
		onShow() {
			console.log('会员中心页面显示');
		},
		methods: {
			goBack() {
				console.log('点击返回按钮');
				
				// 获取页面栈信息
				const pages = getCurrentPages();
				console.log('当前页面栈长度:', pages.length);
				
				if (pages.length > 1) {
					// 有上一页，正常返回
					uni.navigateBack({
						delta: 1,
						success: () => {
							console.log('返回成功');
						},
						fail: (err) => {
							console.log('返回失败:', err);
							// 如果返回失败，跳转到我的页面
							uni.switchTab({
								url: '/pages/myInfo/myInfo'
							});
						}
					});
				} else {
					// 没有上一页，直接跳转到我的页面
					console.log('没有上一页，跳转到我的页面');
					uni.switchTab({
						url: '/pages/myInfo/myInfo'
					});
				}
			},
			
			joinMember() {
				// uni.showModal({
				// 	title: '加入会员',
				// 	content: '是否加入会员享受专属权益？',
				// 	success: (res) => {
				// 		if (res.confirm) {
				// 			this.memberInfo.isMember = true;
				// 			uni.showToast({
				// 				title: '恭喜成为会员',
				// 				icon: 'success'
				// 			});
				// 		}
				// 	}
				// });
				uni.navigateTo({
					url: '/pages/memberRecharge/memberRecharge'
				});
			},
			
			viewMemberDetail() {
				uni.navigateTo({
					url: '/pages/memberDetail/memberDetail'
				});
			},
			
			joinMemberWithBenefits() {
				uni.showModal({
					title: '会员权益',
					content: '加入会员即可享受账户保障、独享礼券、下单奖励、邀请奖励等4大权益',
					confirmText: '立即加入',
					success: (res) => {
						if (res.confirm) {
							this.joinMember();
						}
					}
				});
			},
			
			navigateTo(page) {
				uni.showToast({
					title: `${page} 功能开发中`,
					icon: 'none'
				});
			},
			
			claimGiftPackage() {
				uni.showModal({
					title: '领取礼包',
					content: '恭喜获得专属大礼包！',
					showCancel: false,
					success: () => {
						uni.showToast({
							title: '礼包已领取',
							icon: 'success'
						});
					}
				});
			},
			
			completeAllTasks() {
				uni.navigateTo({
					url: '/pages/dailyTasks/dailyTasks'
				});
			}
		}
	}
</script>

<style lang="scss">
.container {
	background-color: #f5f5f5;
	min-height: 100vh;
}

/* 导航栏 */
.nav-bar {
	background: #333;
	color: white;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20rpx 30rpx;
	padding-top: calc(20rpx + var(--status-bar-height, 0));
	position: relative;
	z-index: 999;
}

.nav-left, .nav-right {
	width: 100rpx;
	height: 100rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;
	border-radius: 50rpx;
	transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	position: relative;
}

.nav-left::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(255, 255, 255, 0.15);
	border-radius: 50rpx;
	opacity: 0;
	transform: scale(0.8);
	transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.nav-left:active::before {
	opacity: 1;
	transform: scale(1);
}

.nav-left:active {
	transform: scale(0.95);
}

.back-icon {
	font-size: 48rpx;
	color: white;
	font-weight: bold;
	text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2);
	line-height: 1;
	z-index: 1;
}

.more-icon {
	font-size: 36rpx;
	color: white;
	text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2);
	z-index: 1;
}

.nav-title {
	font-size: 32rpx;
	font-weight: bold;
	color: white;
}

/* 会员信息卡片 */
.member-card {
	background: linear-gradient(135deg, #FFB74D 0%, #FF8A65 100%);
	margin: 20rpx;
	border-radius: 20rpx;
	padding: 40rpx 30rpx;
	color: white;
}

.member-header {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	margin-bottom: 40rpx;
}

.user-info {
	display: flex;
	align-items: flex-start;
}

.avatar {
	width: 100rpx;
	height: 100rpx;
	border-radius: 50rpx;
	margin-right: 30rpx;
	border: 3rpx solid rgba(255, 255, 255, 0.3);
}

.user-details {
	flex: 1;
}

.username-row {
	display: flex;
	align-items: center;
	margin-bottom: 15rpx;
}

.username {
	font-size: 32rpx;
	font-weight: bold;
	margin-right: 15rpx;
}

.level-icon, .vip-icon, .heart-icon {
	font-size: 24rpx;
	margin-right: 8rpx;
}

.member-status {
	margin-bottom: 15rpx;
}

.join-btn {
	background: rgba(255, 255, 255, 0.2);
	padding: 8rpx 20rpx;
	border-radius: 20rpx;
	font-size: 24rpx;
	border: 1rpx solid rgba(255, 255, 255, 0.3);
}

.member-id {
	font-size: 24rpx;
	opacity: 0.9;
}

.member-detail {
	display: flex;
	align-items: center;
}

.detail-text {
	font-size: 24rpx;
	margin-right: 8rpx;
}

.arrow {
	font-size: 24rpx;
}

/* 会员统计 */
.member-stats {
	display: flex;
	justify-content: space-around;
	margin-bottom: 40rpx;
}

.stat-item {
	text-align: center;
}

.stat-number {
	font-size: 48rpx;
	font-weight: bold;
	margin-bottom: 10rpx;
}

.stat-label {
	font-size: 24rpx;
	opacity: 0.9;
}

/* 加入会员按钮 */
.member-benefits {
	text-align: center;
}

.join-member-btn {
	background: rgba(255, 255, 255, 0.2);
	color: white;
	border: 1rpx solid rgba(255, 255, 255, 0.3);
	border-radius: 30rpx;
	padding: 20rpx 40rpx;
	font-size: 28rpx;
}

/* 会员权益图标 */
.benefits-icons {
	background: white;
	margin: 20rpx;
	border-radius: 20rpx;
	padding: 40rpx 30rpx;
	display: flex;
	justify-content: space-around;
}

.benefit-item {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.benefit-icon {
	font-size: 60rpx;
	margin-bottom: 15rpx;
}

.benefit-label {
	font-size: 24rpx;
	color: #666;
}

/* 专属大礼包 */
.gift-package {
	background: linear-gradient(135deg, #FF6B6B 0%, #FF8E53 100%);
	margin: 20rpx;
	border-radius: 20rpx;
	padding: 30rpx;
	position: relative;
	overflow: hidden;
}

.package-content {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.package-text {
	color: white;
}

.package-title {
	font-size: 32rpx;
	font-weight: bold;
	margin-bottom: 10rpx;
}

.package-subtitle {
	font-size: 24rpx;
	opacity: 0.9;
	margin-bottom: 20rpx;
}

.package-action {
	background: rgba(255, 255, 255, 0.2);
	padding: 12rpx 24rpx;
	border-radius: 30rpx;
	font-size: 24rpx;
	display: inline-block;
}

.package-image {
	font-size: 80rpx;
}

/* 每日任务 */
.daily-tasks {
	background: white;
	margin: 20rpx;
	border-radius: 20rpx;
	padding: 30rpx;
}

.task-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 15rpx;
}

.task-title {
	font-size: 30rpx;
	font-weight: bold;
	color: #333;
}

.task-action {
	background: #FF6B6B;
	color: white;
	padding: 12rpx 24rpx;
	border-radius: 20rpx;
	font-size: 24rpx;
}

.task-subtitle {
	font-size: 24rpx;
	color: #999;
}

/* 会员规则 */
.member-rules {
	background: white;
	margin: 20rpx;
	border-radius: 20rpx;
	padding: 30rpx;
}

.rules-title {
	font-size: 30rpx;
	font-weight: bold;
	color: #333;
	margin-bottom: 20rpx;
}

.rule-item {
	display: flex;
	margin-bottom: 15rpx;
	line-height: 1.6;
}

.rule-number {
	font-size: 26rpx;
	color: #333;
	margin-right: 10rpx;
}

.rule-text {
	font-size: 26rpx;
	color: #666;
	flex: 1;
}
</style>